<template>
	<view class="main">
		<view class="date-bg">
			<view>
				<text class="date-tip">参观时间</text>
				<text class="date-text">{{show_date}}</text>
			</view>
			<view><text class="price">¥{{price}}</text></view>
		</view>
		<view class="info-bg">
			<view class="top-info">观众信息</view>
			<view class="browse-items">
				<view class="bi" v-for="(item, index) in audiences" :key="index">
					<view class="bi-top"><view class="bi-name">{{item.name}}</view><view class="bi-del" @click="delAudi(index)">删除</view></view>
					<view class="bi-top">手机号：{{item.phone}}</view>
					<view class="bi-top">身份证：{{item.card}}</view>
				</view>
			</view>
			<view class="add-tip" @click="addSubInfo">+添加参观者</view>
			<view class="phone-tip">手机号</view>
			<view class="phone-input"><input class="phone-in" placeholder="输入接收验证码的手机号" v-model="phone"/></view>
			<view class="code-bg">
				<view class="code-bor-bg">
					<input class="code-in" placeholder="输入短信验证码" v-model="code"/>
				</view>
				<view class="get-code" @click="sendCode" v-show="show">获取验证码</view>
				<view class="get-code-gray" v-show="!show">{{count}}s</view>
			</view>
			<view class="confirm-btn" @click="confirm">确认预约</view>
		</view>
		
		<uni-popup ref="popup" class="popup-cls">
			<view class="pop-info">
				<view class="pop-top">
					参观者信息
				</view>
				<view class="center">
					<!-- <view class="pop-item">
						<view class="item-title">门票类型</view>
						<view class="item-right-bg"><image class="check" src="../../../../static/2images/checkbox-checked.png"></image>普通观众</view>
					</view> -->
					<view class="pop-item">
						<view class="item-title">观众姓名</view>
						<view class="item-right-bg bor"><input class="pop-input" maxlength="20" placeholder="请输入姓名" v-model="a_name"></input></view>
					</view>
					<view class="pop-item">
						<view class="item-title">手机号码</view>
						<view class="item-right-bg bor"><input class="pop-input" maxlength="11" placeholder="请输入手机号" v-model="a_phone"></input></view>
					</view>
					<view class="pop-item">
						<view class="item-title">证件号码</view>
						<view class="item-right-bg bor"><input class="pop-input" maxlength="18" placeholder="请输入身份证" v-model="a_card"></input></view>
					</view>
				</view>
				<view class="bottom">
					<view class="agree-btn" @click="addAudi">确定添加</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		performSubscribe,performPay
	} from "@/api/2_activity";
	import {registerVerify} from "@/api/user.js";
	import payment from '@/components/payment';
	export default {
		data() {
			return {
				perform_id:'',
				date_str:'',
				time_id:'',
				show_date:'',
				audiences:[],
				a_name:'',
				a_phone:'',
				a_card:'',
				phone:'',
				code:'',
				is_send:false,
				count:'',
				show:true,
				timer:null,
				price:'0.00'
			}
		},
		methods: {
			//打开添加观众
			addSubInfo(){
				if(this.audiences.length >= 5){
					uni.showToast({
						title: '最多5个观众',
						icon: 'none'
					});
					return;
				}
				this.$refs.popup.open('bottom')
			},
			//确定预约并支付
			confirm(){
				if(this.audiences.length == 0){
					uni.showToast({
						title: '请添加观众',
						icon: 'none'
					});
					return;
				}
				if(this.phone == '' || !/^1[3456789]\d{9}$/.test(this.phone)){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				}
				if(!this.is_send){
					uni.showToast({
						title: '请获取验证码',
						icon: 'none'
					});
					return;
				}
				if(this.code == ''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				let data = {
					date_str:this.date_str,
					time_id:this.time_id,
					audiences:this.audiences,
					phone:this.phone,
					code:this.code
				};
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认预约?',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '预约中...'
							});
							performSubscribe(that.perform_id,data).then(res => {
								console.info(res);
								uni.hideLoading();
								
								
								
								// 支付
								performPay({
									order_sn: res.data.order_sn,
									pay_type: 2
								}).then(res2 => {
										let config = res2.data.result.config
										uni.requestPayment({
												timeStamp: config.timestamp,
												nonceStr: config.nonceStr,
												package: config.package,
												signType: config.signType,
												paySign: config.paySign,
												success: (res1) => {
													that.$util.Tips({
																title: '支付成功',
																icon: 'success'
															}, {
																tab: 5,
																url: `/pages/2_development/show_buy_ticket/subscribe/subresult?type=success&title=${that.title}&id=${res.data.id}&order_sn=${res.data.order_sn}`
															})
															// uni.navigateBack({
															// 	delta: 2
															// })
														},
														fail: () => {
															that.$util.Tips({
																title: '支付失败'
															});
															// uni.navigateBack({
															// 	delta: 2
															// })
															// , {
															// 	tab: 5,
															// 	url: `/pages/2_development/show_buy_ticket/result?type=fail&title=${this.title}`
															// }
														},
														complete: (res) => {
															if (res.errMsg == 'requestPayment:cancel') return that
																.$util
																.Tips({
																	title: '取消支付'
																});
														}
												})
										}).catch(res => {
										that.$util.Tips({
											title: res
										});
									})
								}).catch(res => {
								that.$util.Tips({
									title: res
								});
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				console.info(data);
				//清除定时器
				 this.show = true;
				 clearInterval(this.timer);
				 this.timer = null;
				// return;
				// uni.navigateTo({
				// 	url: `/pages/2_development/show_buy_ticket/subscribe/subresult`
				// });
				
				
			},
			//添加观众
			addAudi(){
				if(this.a_name == ''){
					uni.showToast({
						title: '请输入观众姓名',
						icon: 'none'
					});
					return;
				}
				if(this.a_phone == '' || !/^1[3456789]\d{9}$/.test(this.a_phone)){
					uni.showToast({
						title: '请输入观众手机号码',
						icon: 'none'
					});
					return;
				}
				if(this.a_card == ''){
					uni.showToast({
						title: '请输入观众身份证号码',
						icon: 'none'
					});
					return;
				}
				
				const reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;		          
				if( reg.test(this.a_card) === false && this.a_card){
					uni.showToast({
						icon: "none",
						title:'请输入正确身份证号码',
							duration: 2000,
							position: 'top'
					})
					return;
				}else {
					console.log('身份证号码格式正确')
				}
				this.audiences.push({
					'name':this.a_name,
					'phone':this.a_phone,
					'card':this.a_card
				});
				this.a_name = '';
				this.a_phone = '';
				this.a_card = '';
				this.$refs.popup.close();
			},
			//删除观众
			delAudi(e){
				this.audiences.some((item, i)=>{
	　　　　　　　　　　if(i==e){
	　　　　　　　　　　　　this.audiences.splice(i, 1)
	　　　　　　　　　　　　//在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
	　　　　　　　　　　　　return true;
	　　　　　　　　　　}
	　　　　　　　　})
			},
			//发送验证码
			sendCode(){
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请输入手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				uni.showLoading({
					title: '发送中...'
				});
				registerVerify({'phone':that.phone,'type':'scenic'}).then(res=>{
					uni.hideLoading();
					that.is_send = true;
					console.info("123321");
					
					const TIME_COUNT = 60;
					if (!that.timer) {
					   that.count = TIME_COUNT;
					   that.show = false;
					   that.timer = setInterval(() => {
					   if (that.count > 0 && that.count <= TIME_COUNT) {
						 that.count--;
						} else {
						 that.show = true;
						 clearInterval(that.timer);
						 that.timer = null;
						}
					   }, 1000)
					}
				}).catch(res => {
					uni.hideLoading();
					that.$util.Tips({
						title: res
					});
				});
				
			}
		},
		onLoad(options) {
			this.perform_id = options.perform_id;
			this.date_str = options.date_str;
			this.time_id = options.time_id;
			this.show_date = options.date;
			this.price = options.price;
		},
		onUnload(){
			 this.show = true;
			 clearInterval(this.timer);
			 this.timer = null;
		}
	}
</script>

<style>
	.main{
		display: flex;
		flex-direction: column;
		
	}
	.date-bg{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20rpx 20rpx;
		background-color: #FFFFFF;
		height: 80rpx;
		padding: 30rpx;
		justify-content: space-between;
	}
	.price{
		font-size: 28rpx;
		color: #FF3700;
	}
	.date-tip{
		font-size: 28rpx;
		color: #000000;
	}
	.date-text{
		font-size: 28rpx;
		color: #FF3700;
		margin-left: 20rpx;
	}
	.info-bg{
		background-color: #FFFFFF;
		margin: 0rpx 20rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}
	.top-info{
		font-size: 28rpx;
		color: #000000;
	}
	.browse-items{
		display: flex;
		flex-direction: column;
	}
	.bi{
		display: flex;
		flex-direction: column;
		border: 1px solid #F0F0F0;
		margin-top: 20rpx;
	}
	.bi-top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
		padding: 0rpx 30rpx;
	}
	.bi-name{
		font-size: 28rpx;
		color: #000000;
	}
	.bi-del{
		color: #FF3700;
	}
	.add-tip{
		height: 80rpx;
		border: 1px dashed #FF3700;
		border-radius: 40rpx;
		text-align: center;
		margin-top: 30rpx;
		line-height: 80rpx;
		color: #FF3700;
	}
	.phone-tip{
		font-size: 28rpx;
		color: #000000;
		margin-top: 30rpx;
	}
	.phone-input{
		border: 1px solid #F0F0F0;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
	}
	.phone-in{
		flex: 1;
		height:80rpx;
		margin: 0px 10rpx;
	}
	.code-bg{
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
	}
	.code-bor-bg{
		border: 1px solid #F0F0F0;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		width:60%;
	}
	.code-in{
		flex: 1;
		height:80rpx;
		margin: 0px 10rpx;
	}
	.code-img{
		flex:1;
		heigh:80rpx;
		background-color: #F3A73F;
		margin-left: 20rpx;
	}
	.get-code{
		flex:1;
		heigh:80rpx;
		background-color: #0193ff;
		margin-left: 20rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
	.get-code-gray{
		flex:1;
		heigh:80rpx;
		margin-left: 20rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		background-color: #CCCCCC;
	}
	.confirm-btn{
		height: 80rpx;
		background-color: #0193ff;
		margin: 80rpx 20rpx 60rpx 20rpx; 
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
	}
	/****/
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:100%;
		background-color: white;
		display: flex;
		flex-direction: column;
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		height: 350rpx;
		margin: 30rpx;
	}
	.pop-item{
		display: flex;
		flex-direction: row;
		margin: 20rpx 30rpx;
		align-items: center;
		height: 80rpx;
		
	}
	.item-title{
		font-size: 28rpx;
		color: #000000;
	}
	.item-right-bg{
		display: flex;
		flex-direction: row;
		margin-left: 30rpx;
		align-items: center;
		flex: 1;
		height: 80rpx;
	}
	.check{
		width:28rpx;
		height:28rpx;
		margin-right: 10rpx;
	}
	.bor{
		border: 1px solid #F0F0F0;
	}
	.pop-input{
		margin: 0rpx 10rpx;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.agree-btn{
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height:80rpx;
		background-color: #01A1ED;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-bottom: 30rpx;
	}
</style>
